/**
 * useDeferredValue
 *    概念：
 *        用于获取一份基于某个值的延迟值
 *    语法：
 *        const deferredValue = useDeferredValue(value)
 *        1. value - 要基于的值
 *        2. deferredValue - 延迟之后的值
 */

import { Space, Button } from "antd";
import { useState, useDeferredValue } from "react";
import SearchResults from "./SearchResults";

export default function App() {
  const [query, setQuery] = useState("");
  const queryTwo = useDeferredValue(query);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <hr />

      <SearchResults query={queryTwo} />
    </div>
  );
}

/**
 * 第一次输入 123
 *    query = '123'
 *    queryTwo = ''
 *    App 组件重新 Render 由于 SearchResults 做了 memo 不会重新 render
 *    queryTwo = '123'
 *    App 组件重新 Render , 这时 SearchResults 再使用 新的 '123' 来 render
 *
 * 第二次输入 456
 *    query = '123456'
 *    queryTwo = '123'
 *    App 组件重新 Render 由于 SearchResults 做了 memo 不会重新 render
 *    queryTwo = '123456'
 *    App 组件重新 Render , 这时 SearchResults 再使用 新的 '123' 来 render
 */

// export default function App() {
//   const [count, setCount] = useState(1);
//   const deferredValue = useDeferredValue(count);

//   console.log("Render", count, deferredValue);

//   return (
//     <div>
//       <p>count: {count}</p>
//       <p>deferredValue: {deferredValue}</p>

//       <Space>
//         <Button onClick={() => setCount(count + 1)}>INCREMENT</Button>
//       </Space>
//     </div>
//   );
// }
